<template>
  <div
    class="resources_warp"
    :class="{
      one: resourcesArr.length == 1,
      two: resourcesArr.length == 2,
      three: resourcesArr.length == 3
    }"
  >
    <div
      v-for="(item, index) in resourcesArr"
      :key="index"
      class="img-wrap"
      @click="handlerClick(item)"
    >
      <img :src="item.imgUrl" alt="" />
    </div>
  </div>
</template>
<script>
import { http2https } from '@/utils/util';

export default {
  props: {
    resourcesArr: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.resourcesArr.forEach(item => {
      item.imgUrl = http2https(item.imgUrl);
    });
  },
  methods: {
    handlerClick(data) {
      if (!data.mshopLinkData) return;
      this.$emit('resourceClick', data);
    }
  }
};
</script>
<style lang="scss" scoped>
.resources_warp {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  img {
    border-radius: 10px;
    margin-bottom: 6px;
  }
}
.one {
  .img-wrap {
    width: 100%;
  }
}
.two {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  .img-wrap {
    width: 175px;
  }
}
.three {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  .img-wrap {
    width: 115px;
  }
}
img {
  width: 100%;
  vertical-align: top;
}
</style>
